<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="renderer" content="webkit"> 
	<meta content="always" name="referrer">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/layui.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="css/zhanghu.css">
    <script src="js/jquery.min.js"></script>
	<script src="lib/layui/layui.js"></script>
<script src="js/ajaxSet.js" type="text/javascript" charset="utf-8"></script>
	<title>我的订单</title>
	<!--[if lt IE 9]>
			<script type="text/javascript">
				window.location.href = "tip.html"
			</script>
		<![endif]-->
    <style>
		#userName{
			float: left;
			width: 75px;
			text-align: center;
			position: relative;
			cursor: pointer;
			display: none;
		}
		#userName li:after{
			display:block;content:"";visibility:hidden;height:0;
			border-bottom:  1px solid #000000;
		}
		#userName dl{
			top: 42px;
			width: 100%;
			position: absolute;
			display: none;
			background: #fff;
			z-index: 9999;
		}
	</style>

</head>
<body style="background: #f8f8f8;">
    <div class="header">
	<div class="w_1190">
		<div class="h_right fr">
			<a href="index.html">YIXA首页</a>
			<a href="dingdan.html">我的订单</a>
			<a href="zhanghu.html">账户设置</a>
			<a href="about.html">关于我们</a>
		</div>
		<div class="h_left">
			<ul id="userName">
				<li></li>
				<dl>
					<dd>退出登录</dd>
				</dl>
			</ul>
			<!-- 未登录 -->
				
				<a href="login.html" class="c_01afff" id="login">登录</a>
				<a href="register.html" class="registerno">免费注册</a>
			<!-- 已登录 -->
		</div>
	</div>
</div>
<script type="text/javascript">
	layui.use(['layer'], function() {
        var layer = layui.layer;
	
	$("#userName").on("click",function(){
	    $(this).find("dl").slideToggle(200)
	})
	
	$("#userName dd").on("click",function(){
	    $.ajax({
	    	type:"post",
	    	url:"http://52lvu.cn:8080/api/login/logout",
	        data:{
	            userId : token.userId
	        },success : function (result){

	            if (result.resultCode == 200) {
	            	localStorage.removeItem("token");
	            	window.location.href="login.html"
	            }else{
		        	layer.msg("请求错误，请稍后重试",{icon:2,time:2000})
		        }
	            
	        },error : function (e){
	           layer.msg("请求错误，请稍后重试",{icon:2,time:2000})
	        }
	    });
	})
	
	var token = JSON.parse(localStorage.getItem('token'));
	
	if (token) {
		var expiredTime = 1800000;
		var loginTime = token.loginTime
		var nowTime = new Date().getTime();
		
		if ( (nowTime - loginTime) > expiredTime ) {
			localStorage.removeItem("token");
			window.location.href = "login.html";
		}else{
			$("#userName").show(); 
			$(".registerno").hide();
			$("#login").hide()
			$("#userName li").html(token.userName)
		}
	}else{
	    window.location.href="login.html";
	}
})
</script>
    <div class="dingdan">
        <div class="title">我的订单</div>
        <div class="search-bar clearfloat">
            <div class="search">
                <input type="text" placeholder="输入商品的订单号进行查询" id="order" style="height: 40px;">
            </div>
            <div class="layui-inline" style="margin-left: 50px;">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="comedata" placeholder="yyyy-MM-dd">
                </div>
            </div>
            <div style="float: left;margin: 0 10px;line-height: 40px;font-size: 20px;">-</div>
            <div class="layui-inline">
                <div class="layui-input-inline">
                    <input type="text" class="layui-input" id="leveldata" placeholder="yyyy-MM-dd">
                </div>
            </div>
            <div class="btnBOx">
            	<button id="search">搜索</button>
            </div>
        </div>
        <div class="list w-1200 clearfloat">
            <div class="caption">
                <a class="active">全部订单</a>
                <!--<a>已支付</a>
                <a>未支付</a>-->
            </div>
            <div class="main" style="min-height: 100px;">
                <div class="tab lift1" id="listCont">

                </div>
                <!--<div class="tab lift2" style="display: none;">2</div>
                <div class="tab lift3" style="display: none;">3</div>-->
            </div>
            <div id="fyq" style="text-align: center;margin-top: 20px;"></div>
        </div>
    </div>

    <div id="footer"></div>

<div id="qq"></div>
</body>
</html>
<script type="text/html" id="list1">
	{{# for(var i = 0;  i < d.length; i++){ }}
		<div class="clearfloat">
		    <div class="fl">
		        <img src="http://52lvu.cn:8080/hotel/upload{{d[i].picture}}" alt="">
		    </div>
		    <div class="center">
		        <h1>酒店名称 ： {{d[i].hotelName}}</h1>
		        <h2 style="margin-top: 10px;">
		        	入住人员 ：	
		        		{{d[i].orderDetailEntities[0].orderGuestEntities[0].guestName}} 等人入住
		        		
		        </h2>
		        <h3 style="margin-top: 10px;">订单号 ： {{d[i].orderId}}</h1>
		        <h4 style="margin-top: 5px;">入住时间 ： {{d[i].startTime}}</h4>
		        <h4 style="margin-top: 5px;">离开时间 ： {{d[i].endTime}}</h4>
		    </div>
		    {{#  if(d[i].hOrderDiffEntities.length>0){ }}
		   		<h1 style="font-size: 14px;float: left;margin: 20px 0 0 45px;">退差价</h1>
			    <div style="float: left;line-height: 20px;margin: 15px 0 0 20px;height: 140px;overflow: auto;width: 390px;">
				    	{{# for(var j = 0, len = d[i].hOrderDiffEntities.length ; j < len; j++){ }}
					    	<ul>
					    		<li>金额   : {{d[i].hOrderDiffEntities[j].diffPrice}}</li>
					    		<li>原因  : {{d[i].hOrderDiffEntities[j].reason}}</li>
					    	</ul>
				    	{{#  } }}
			    </div>
		    {{#  } }}
		    <div class="fr">
		    	<a href="confirm.html?orderId={{d[i].id}}&userId={{d[i].userId}}&orderStatus={{d[i].orderStatus}}&id={{d[i].hotelId}}">
			        <h3 style="margin-top: 10px;font-weight: normal;">
			        	{{#  if(d[i].orderStatus == 0){ }}
			        		{{"未付款"}}
	        			{{#  } }}
			        	{{#  if(d[i].orderStatus == 1){ }}
			        		{{"已付款"}}
			        	{{#  } }}
			        	{{#  if(d[i].orderStatus == 2){ }}
			        		{{"已确认到账"}}
			        	{{#  } }}
			        	{{#  if(d[i].orderStatus == 3){ }}
			        		{{"正在申请退款"}}
			        	{{#  } }}
			        	{{#  if(d[i].orderStatus == 4){ }}
			        		{{"管理员同意退款"}}
			        	{{#  } }}
			        	{{#  if(d[i].orderStatus == 5){ }}
			        		{{"管理员不同意退款"}}
			        	{{#  } }}
			        	{{#  if(d[i].orderStatus == 6){ }}
			        		{{"超时取消"}}
			        	{{#  } }}
			        	{{#  if(d[i].orderStatus == 7){ }}
			        		{{"订单完成"}}
			        	{{#  } }}
			        </h3>
		        </a>
		        {{#  if( (d[i].orderStatus < 2) && (d[i].orderStatus > 0) ){ }}
		        	<h3 class="sqtk" data-userId="{{d[i].userId}}" data-id="{{d[i].id}}" style="font-weight: normal;font-size: 12px;cursor: pointer;margin-top: 10px;" >申请退款</h3>
		        {{#  } }}
		        <a href="confirm.html?orderId={{d[i].id}}&userId={{d[i].userId}}&orderStatus={{d[i].orderStatus}}&id={{d[i].hotelId}}">
		        	<h2 style="margin-top: 10px;">查看详情</h2>
		    	</a>
		        <h1 style="margin: 15px 15px 0 0;">总价： {{d[i].orderPirce}}</h1>
		    </div>
		</div>
	{{# } }}
</script>
<script>
layui.use(['laydate','laypage','laytpl'], function() {
        var laydate = layui.laydate,
        	laypage = layui.laypage,
        	laytpl = layui.laytpl;
        	
        	
    	 $("#qq").load("lib/qq.html");$("#footer").load("lib/footer.html");
	    laydate.render({
	        elem: '#comedata',
	        theme: '#ff660c'
	    });
	    laydate.render({
	        elem: '#leveldata',
	        theme: '#ff660c'
	    });
	    
	    
	    $(".caption a").on("click",function () {
	        var thisIndex = $(this).index();
	        $(this).addClass("active").siblings().removeClass("active");
	        $(".dingdan .list .tab").eq(thisIndex).show().siblings().hide();

	    })
	    
	    var token = JSON.parse(localStorage.getItem("token"));
	

	list();
	
	var obj = {};
	$("#search").on("click",function(){
		
		var orderId = $("#order").val() ,
			startTime = $("#comedata").val(),
			endTime = $("#leveldata").val();
			
		var d1 = new Date($("#comedata").val()).getTime(),
			d2 = new Date($("#leveldata").val()).getTime(),
			now = new Date(new Date().setHours(0,0,0,0)).getTime();
			
			
		if (d2 < d1 && d1 < now) {
			layer.msg("您的时间选择错误，请重新选择",{icon:2,time:2000})
			return false ;
		}	
	
		
		obj.startTime = $("#comedata").val();
		obj.endTime = $("#leveldata").val();
		obj.orderId = $("#order").val() ;
		
		list(0,obj)
		
	})
	
	
	
	function list(curr,obj){
		
		obj = obj || {};
		
		var token = JSON.parse(localStorage.getItem("token"));
	    $.ajax({
	        type: 'POST',
	        url: "http://52lvu.cn:8080/api/order/getOrderByUserId" ,
	        data: {
	        	userId : token.id,
	        	token : token.token,
	        	name : obj.orderId || $("#order").val(),
	        	startTime : obj.startTime || $("#comedata").val(),
	        	endTime : obj.endTime || $("#leveldata").val(),
	        	start : curr || 1 ,
	        	length : 8
	        },
	        success: function(resp){
				
				if (resp.resultCode == "200") {
					var data = resp.data;
					
					for (i = 0 ; i < data.length ; i++) {
						
						data[i].userId = token.id;
						data[i].picture = data[i].picture.split(";")[0]
					}
					
					var cont = list1.innerHTML ;
					
		            laytpl(cont).render(data, function(html){	
						$("#listCont").html(html);
					});
		
		
					$(".sqtk").on("click",function(){
				    	var orderId = $(this).attr("data-id"),
				    		userId = $(this).attr("data-userid");
				    		
			    	    layer.open({
					    	type: 2,
					    	title: '申请退款',
					    	shadeClose: true,
					    	shade: false,
					    	maxmin: true,
					    	area: ['893px', '600px'],
					    	content: 'feedback.html?orderId='+orderId +"&userId="+userId
					  	})
			    	    
			    	    $(this).html("已申请退款")
			    	    
			    	})
		
		            laypage.render({
		                elem: 'fyq', //容器。值支持id名、原生dom对象，jquery对象。【如该容器为】：<div id="page1"></div>
		                count: resp.ext, //通过后台拿到的总页数
					    theme: '#ff660c',
					    limit : 8,
		                curr: curr || 1, //当前页
		                jump: function(obj, first){ //触发分页后的回调
		                    if(!first){ //点击跳页触发函数自身，并传递当前页：obj.curr
		                        list(obj.curr);
		                    }
		                }
		            });
				}else if (resp.resultCode == "104"){
		        	layer.msg("登录超时，请重新登录",{icon:2,time:2000})
		        }else{
		        	layer.msg("请求错误，请稍后重试",{icon:2,time:2000})
		        }
	            
	        },
	        error:function(resp){

	        }
	    });
	}
	    
})
</script>